const stats = new Stats()
stats.showPanel(0)
document.body.appendChild(stats.dom)

const ballNum = 1

function Ball() {
    this.x = floor(innerWidth / 2)
    this.y = floor(innerHeight / 2)
    this.size = 0
    this.d = 1
    this.shrink = 0.999
    this.grow = 1.001
    this.wantX = 0
    this.wantY = 0
    this.wantSize = 0
    this.hue = ''
    this.draw = () => {
        fill(this.hue, 100, 100)
        circle(this.x, this.y, this.size)
    }
    this.update = () => {
        if (this.wantX > this.x) {
            this.x += this.d
        } else if (this.wantX < this.x) {
            this.x -= this.d
        }
        if (this.wantY > this.y) {
            this.y += this.d
        } else if (this.wantY < this.y) {
            this.y -= this.d
        }
        if (this.wantSize > this.size) {
            this.size *= this.grow
        }else if (this.wantSize < this.size) {
            this.size *= this.shrink
        }
        this.draw()
    }
}

let balls = []

function initBalls() {
    for (let i = 0; i < ballNum; i++) {
        const ball = new Ball()
        balls.push(ball)
    }
}

function changeBalls() {
    balls.forEach((ball) => {
        const hue = floor(random(100))
        const size = floor(random(10, 30))
        const wantX = floor(random(size, innerWidth - size))
        const wantY = floor(random(size, innerHeight - size))
        const wantSize = floor(random(10, 30))

        ball.hue = hue
        ball.size = size
        ball.wantX = wantX
        ball.wantY = wantY
        ball.wantSize = wantSize
    })
}

function updateBalls() {
    balls.forEach(ball => {
        ball.update()
    })
}

setInterval(()=>{
    changeBalls()
},800)

function setup() {
    let cnv = createCanvas(innerWidth, innerHeight)
    // cnv.mousePressed(changeBalls)
    noStroke()
    frameRate(60)
    colorMode(HSB, 100)
    background(0)
    initBalls()
}

function draw() {
    stats.begin()
    clear()
    background(0)
    updateBalls()
    stats.end()
}
